<template>
  <div class="list-drag-demo">
    <el-card>
      <template #header>
        <span>拖拽排序列表</span>
      </template>

      <div class="drag-list">
        <div
          v-for="(item, index) in listData"
          :key="item.id"
          class="list-item"
          :class="{ 'is-dragging': draggingIndex === index }"
        >
          <div class="item-content">
            <el-icon class="drag-handle">
              <Rank />
            </el-icon>
            
            <div class="item-info">
              <div class="item-title">{{ item.title }}</div>
              <div class="item-desc">{{ item.description }}</div>
            </div>

            <div class="item-actions">
              <el-tag :type="item.type">{{ item.tag }}</el-tag>
              <el-button
                size="small"
                type="danger"
                link
                @click="removeListItem(index)"
              >
                删除
              </el-button>
            </div>
          </div>
        </div>
      </div>

      <div style="margin-top: 20px">
        <el-button type="primary" @click="addListItem">添加列表项</el-button>
        <el-button @click="saveListOrder">保存顺序</el-button>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { Rank } from '@element-plus/icons-vue'
import Sortable from 'sortablejs'

const listData = ref([
  {
    id: 1,
    title: '需求分析',
    description: '完成项目需求分析文档',
    tag: '重要',
    type: 'danger'
  },
  {
    id: 2,
    title: 'UI设计',
    description: '设计用户界面和交互流程',
    tag: '进行中',
    type: 'primary'
  },
  {
    id: 3,
    title: '前端开发',
    description: '实现前端页面和功能',
    tag: '待开始',
    type: 'info'
  },
  {
    id: 4,
    title: '测试验收',
    description: '进行功能测试和用户验收',
    tag: '待开始',
    type: 'warning'
  }
])

const draggingIndex = ref(-1)

// 初始化列表拖拽
const initListDrag = () => {
  const list = document.querySelector('.drag-list')
  console.log("list", list)
  if (list) {
    Sortable.create(list, {
      animation: 150,
      ghostClass: 'sortable-ghost', /* 拖拽时的样式 */
      chosenClass: 'sortable-chosen', /* 被选中时的样式 */
      handle: '.drag-handle', /* 拖拽的元素 */
      onStart: (evt) => {
        draggingIndex.value = evt.oldIndex
      },
      onEnd: (evt) => {
        draggingIndex.value = -1
        const { oldIndex, newIndex } = evt
        if (oldIndex !== newIndex) {
          const movedItem = listData.value.splice(oldIndex, 1)[0]
          listData.value.splice(newIndex, 0, movedItem)
        }
      }
    })
  }
}

// 添加列表项
const addListItem = () => {
  const newId = Math.max(...listData.value.map(item => item.id)) + 1
  listData.value.push({
    id: newId,
    title: `新任务 ${newId}`,
    description: '这是新添加的任务描述',
    tag: '待开始',
    type: 'info'
  })
  ElMessage.success('列表项添加成功')
}

// 删除列表项
const removeListItem = (index) => {
  listData.value.splice(index, 1)
  ElMessage.success('列表项删除成功')
}

// 保存顺序
const saveListOrder = () => {
  ElMessage.success('列表顺序已保存')
  console.log('当前顺序:', listData.value)
}

onMounted(() => {
  initListDrag()
})
</script>

<style scoped>
.list-drag-demo {
  padding: 20px;
}

.drag-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.list-item {
  padding: 16px;
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  background: white;
  transition: all 0.3s ease;
}

.list-item:hover {
  border-color: #409eff;
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.1);
}

.list-item.is-dragging {
  opacity: 0.8;
  transform: rotate(5deg);
}

.item-content {
  display: flex;
  align-items: center;
  gap: 12px;
}

.drag-handle {
  color: #c0c4cc;
  cursor: move;
  transition: color 0.3s;
}

.drag-handle:hover {
  color: #409eff;
}

.item-info {
  flex: 1;
}

.item-title {
  font-weight: 600;
  margin-bottom: 4px;
}

.item-desc {
  color: #909399;
  font-size: 12px;
}

.item-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sortable-ghost {
  opacity: 0.5;
  background: #f0f9ff;
}

.sortable-chosen {
  background: #f0f9ff;
}
</style>